<template>
    <view>
        <view class="nav">
            <view :class="'nav-child borders ' + (grade_open ? 'active' : '')" @tap="tapGradeNav" v-if="!(dropDownMenuGradeData.length > 0 ? false : true)" data-nav="2">
                <view class="nav-title">{{ selected_grade_name.length>0&&config.curGrade<=0 ? selected_grade_name : dropDownMenuTitle[0] }}</view>
                <view class="icon"></view>
            </view>
            <view :class="'nav-child borders-right ' + (subject_open ? 'active' : '')" @tap="tapSubjectNav" v-if="!(dropDownMenuSubjectData.length > 0 ? false : true)" data-nav="3">
                <view class="nav-title">{{ selected_subject_name.length>0&&config.curSubject<=0 ? selected_subject_name : dropDownMenuTitle[1] }}</view>
                <view class="icon"></view>
            </view>
            <view :class="'nav-child ' + (dispart_open ? 'active' : '')" @tap="tapDispartNav" v-if="!(dropDownMenuDispartData.length > 0 ? false : true)" data-nav="4">
                <view class="nav-title">{{ selected_dispart_name.length&&config.curDispart<=0 ? selected_dispart_name : dropDownMenuTitle[2] }}</view>
                <view class="icon"></view>
            </view>
            <view :class="'nav-child ' + (type_open ? 'active' : '')" @tap="tapOrderNav" v-if="!(dropDownMenuOrderType.length > 0 ? false : true)" data-nav="4">
                <view class="nav-title">{{ selected_order_type.length > 0 ? selected_order_type : dropDownMenuTitle[3] }}</view>
                <view class="icon"></view>
            </view>
        </view>

        <view :class="'container container_hd ' + (grade_open ? 'show' : 'disappear') + ' '">
            <view class="z-height">
                <view>
                    <block v-for="(item, index) in dropDownMenuGradeData" :key="index">
                        <view :class="'sortitem ' + ((selected_grade_id==item.id||config.curGrade==item.id)&&item.id>0 ? ' active ' : ' ')" :data-model="item" @tap="selectGradeItem">{{ item.title }}</view>
                    </block>
                </view>
            </view>
        </view>
        <view :class="'container container_hd ' + (subject_open ? 'show' : 'disappear') + ' '">
            <view class="z-height">
                <view>
                    <block v-for="(item, index) in dropDownMenuSubjectData" :key="index">
                        <view :class="'sortitem ' + ((selected_subject_id==item.id||config.curSubject==item.id)&&item.id>0 ? ' active ' : ' ')" :data-model="item" @tap="selectSubjectItem">{{ item.title }}</view>
                    </block>
                </view>
            </view>
        </view>
        <view :class="'container container_hd ' + (dispart_open ? 'show' : 'disappear') + ' '">
            <view class="z-height">
                <view>
                    <block v-for="(item, index) in dropDownMenuDispartData" :key="index">
                        <view :class="'sortitem ' + ((selected_dispart_id==item.id||config.curDispart==item.id)&&item.id>0 ? ' active ' : ' ')" :data-model="item" @tap="selectDispartItem">{{ item.title }}</view>
                    </block>
                </view>
            </view>
        </view>
        <view :class="'container container_hd ' + (type_open ? 'show' : 'disappear') + ' '">
            <view class="z-height">
                <view>
                    <block v-for="(item, index) in dropDownMenuOrderType" :key="index">
                        <view :class="'sortitem ' + (selected_order_id == item.id ? ' active ' : ' ')" :data-model="item" @tap="selectOrderItem">{{ item.title }}</view>
                    </block>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            grade_open: false,
            // 全部年级
            subject_open: false,
            // 全部学科
            dispart_open: false,
            // 全部分册
            type_open: false,
            // 排序类型
            shownavindex: '',
            selected_grade_id: 0,
            selected_grade_name: '',
            selected_subject_id: 0,
            selected_subject_name: '',
            selected_dispart_id: 0,
            selected_dispart_name: '',
            selected_order_id: 0,
            selected_order_type: '',
        };
    },
    props: {
        dropDownMenuTitle: {
            type: Array,
            default: () => []
        },
        dropDownMenuGradeData: {
            type: Array,
            default: () => []
        },
        dropDownMenuSubjectData: {
            type: Array,
            default: () => []
        },
        dropDownMenuDispartData: {
            type: Array,
            default: () => []
        },
        dropDownMenuOrderType: {
            type: Array,
            default: () => []
        },
        selectConfig: {
            type:Object
        }
    },
    computed: {
      config(){
        return this.selectConfig;
      }
    },
    methods: {
        tapGradeNav: function (e) {
            if (this.grade_open) {
                this.setData({
                    grade_open: false,
                    subject_open: false,
                    dispart_open: false,
                    type_open: false,
                    shownavindex: 0
                });
            } else {
                this.setData({
                    grade_open: true,
                    subject_open: false,
                    dispart_open: false,
                    type_open: false,
                    shownavindex: e.currentTarget.dataset.nav
                });
            }
        },
        tapSubjectNav: function (e) {
            if (this.subject_open) {
                this.setData({
                    grade_open: false,
                    subject_open: false,
                    dispart_open: false,
                    type_open: false,
                    shownavindex: 0
                });
            } else {
                this.setData({
                    grade_open: false,
                    subject_open: true,
                    dispart_open: false,
                    type_open: false,
                    shownavindex: e.currentTarget.dataset.nav
                });
            }
        },
        tapDispartNav: function (e) {
            if (this.dispart_open) {
                this.setData({
                    grade_open: false,
                    subject_open: false,
                    dispart_open: false,
                    type_open: false,
                    shownavindex: 0
                });
            } else {
                this.setData({
                    grade_open: false,
                    subject_open: false,
                    dispart_open: true,
                    type_open: false,
                    shownavindex: e.currentTarget.dataset.nav
                });
            }
        },
        tapOrderNav: function (e) {
            if (this.type_open) {
                this.setData({
                    grade_open: false,
                    subject_open: false,
                    dispart_open: false,
                    type_open: false,
                    shownavindex: 0
                });
            } else {
                this.setData({
                    grade_open: false,
                    subject_open: false,
                    dispart_open: false,
                    type_open: true,
                    shownavindex: e.currentTarget.dataset.nav
                });
            }
        },
        showInitGrade(id, title) {
            this.closeHyFilter();
            this.setData({
                selected_grade_id: id,
                selected_grade_name: title
            });
            this.$emit('selectGradeItem', {
                detail: {
                    index: 0,
                    selectedId: id,
                    selectedTitle: title
                }
            });
        },
        selectGradeItem: function (e) {
            var selectedId = e.target.dataset.model.id;
            var selectedTitle = e.target.dataset.model.title;
            this.closeHyFilter();
            this.setData({
                selected_grade_id: selectedId,
                selected_grade_name: selectedTitle
            });
            this.$emit('selectGradeItem', {
                detail: {
                    index: this.shownavindex,
                    selectedId: selectedId,
                    selectedTitle: selectedTitle
                }
            });
        },
        selectSubjectItem: function (e) {
            var selectedId = e.target.dataset.model.id;
            var selectedTitle = e.target.dataset.model.title;
            this.closeHyFilter();
            this.setData({
                selected_subject_id: selectedId,
                selected_subject_name: selectedTitle
            });
            this.$emit('selectSubjectItem', {
                detail: {
                    index: this.shownavindex,
                    selectedId: selectedId,
                    selectedTitle: selectedTitle
                }
            });
        },
        selectDispartItem: function (e) {
            var selectedId = e.target.dataset.model.id;
            var selectedTitle = e.target.dataset.model.title;
            this.closeHyFilter();
            this.setData({
                selected_dispart_id: selectedId,
                selected_dispart_name: selectedTitle
            });
            this.$emit('selectDispartItem', {
                detail: {
                    index: this.shownavindex,
                    selectedId: selectedId,
                    selectedTitle: selectedTitle
                }
            });
        },
        selectOrderItem: function (e) {
            var selectedId = e.target.dataset.model.id;
            var selectedTitle = e.target.dataset.model.title;
            this.closeHyFilter();
            this.setData({
                selected_order_id: selectedId,
                selected_order_type: selectedTitle
            });
            this.$emit('selectOrderItem', {
                detail: {
                    index: this.shownavindex,
                    selectedId: selectedId,
                    selectedTitle: selectedTitle
                }
            });
        },
        /**关闭筛选 */
        closeHyFilter: function () {
            if (this.grade_open) {
                this.setData({
                    grade_open: false,
                    subject_open: false,
                    dispart_open: false,
                    type_open: false
                });
            } else if (this.subject_open) {
                this.setData({
                    grade_open: false,
                    subject_open: false,
                    dispart_open: false,
                    type_open: false
                });
            } else if (this.dispart_open) {
                this.setData({
                    grade_open: false,
                    subject_open: false,
                    dispart_open: false,
                    type_open: false
                });
            } else if (this.type_open) {
                this.setData({
                    grade_open: false,
                    subject_open: false,
                    dispart_open: false,
                    type_open: false
                });
            }
        }
    },
    created: function () {
      this.setData({
        selected_grade_id: this.config.curGrade,
        selected_subject_id: this.config.curSubject,
        selected_dispart_id: this.config.curDispart
      });
    }
};
</script>
<style>
@import './dropdownmenu.css';
</style>
